<template>
  <div class="particulars">
    <img src="../../assets/ico.png" alt="" />
    <h3>签约详情</h3>
    <el-divider border-style="double" />
    <h4>居民信息</h4>
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="box1">
          <span class="xinmin">姓名</span>
          <span class="war">王安然</span>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="box2">
          <span class="id">身份证号</span>
          <span>513721299711002299</span>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="box3">
          <span class="sex">性别</span>
          <span>女</span>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="box4">
          <span class="age">年龄</span>
          <span>26</span>
        </div>
      </el-col>
    </el-row>
    <div class="bttom">
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="box">
            <span class="xinmin">联系电话</span>
            <span class="war">18864308600</span>
          </div>
        </el-col>
        <el-col :span="10">
          <div class="box2">
            <span class="id">现居地 </span>
            <span> 怀柔区洛西县建设路青莲小区6-601</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="box4">
            <span class="age">居民标签</span>
            <span>
              <el-button type="warning" plain>高血压</el-button>
              <el-button type="danger" plain>冠心病</el-button>
            </span>
          </div>
        </el-col>
      </el-row>
      <span class="family">家庭成员</span>
      <div class="member">
        <el-row :gutter="12">
          <el-col :span="5">
            <el-card shadow="hover"> Hover </el-card>
          </el-col>
          <el-col :span="5">
            <el-card shadow="hover"> Hover </el-card>
          </el-col>
        </el-row>
      </div>
      <el-divider border-style="double" />
    </div>
    <!--  -->
    <h4>签约信息</h4>
    <el-row :gutter="20">
      <el-col :span="7">
        <div class="box1">
          <span class="qy">签约编号</span>
          <span class="">20190009091</span>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="box2">
          <span class="qy">签约状态</span>
          <span>待审核</span>
        </div>
      </el-col>
      <el-col :span="7">
        <div class="box3">
          <span class="qy">签约机构</span>
          <span>洛西社区卫生服务站</span>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="box4">
          <span class="qy">签约团队</span>
          <span> 李明明团队</span>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="7">
        <div class="box1">
          <span class="qy">签约医生</span>
          <span class="">老人服务包</span>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="box2">
          <span class="qy">服务包</span>
          <span>老人服务包</span>
        </div>
      </el-col>
      <el-col :span="7">
        <div class="box3">
          <span class="qy">签约周期</span>
          <span>1年</span>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="box4">
          <span class="qy">费用</span>
          <span> ¥120</span>
        </div>
      </el-col>
    </el-row>
    <!--  --><el-row :gutter="20">
      <el-col :span="7">
        <div class="box1">
          <span class="qy">签约类型</span>
          <span class="">首次签约</span>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="box2">
          <span class="qy">申请时间 </span>
          <span>2020/10/09 </span>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="box3">
          <span class="qy">生效日期</span>
          <span>2020/10/09</span>
        </div>
      </el-col>
    </el-row>
    <el-divider border-style="double" />
    <el-row class="mb-4">
      <el-button type="primary" @click="handleClick">编辑签约信息</el-button>
      <el-button type="success" @click="open">提醒支付</el-button>
      <el-button class="left" type="primary" @click="backtrack">返回</el-button>
    </el-row>
  </div>
</template>

<script setup>
import { ref } from "vue";

import { useRouter, useRoute } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
// export default {
//   name: "App",
// };
const router = useRouter();
const value2 = ref("");
const handleClick = () => {
  // console.log('绑定事件成功')
  router.push("/signing-management/redact");
};
const approve = () => {
  // console.log('绑定事件成功')
  router.push("/signing-management/approve");
};

const backtrack = () => {
  // console.log('绑定事件成功')
  router.push("/signing-management/particulars");
};
const open = () => {
      ElMessage({
        type: "success",
        message: "提醒成功",
      });
};
</script>

<style lang="less" scoped>
img {
  width: 15px;
  height: 30px;
  position: absolute;
  margin-left: 0;
}
h3 {
  margin-left: 30px;
}
h4 {
  margin-left: 30px;
}
.box1 {
  display: inline-block;
  margin-left: 50px;
  .xinmin {
    margin-right: 30px;
  }
}
.box2 {
  display: inline-block;
  .id {
    margin-right: 30px;
  }
}
.box3 {
  display: inline-block;
  .sex {
    margin-right: 30px;
  }
}
.box4 {
  display: inline-block;
  .age {
    margin-right: 30px;
  }
}
.bttom {
  margin-top: 15px;
}
.box {
  margin-left: 30px;
}
.family {
  margin-top: 25px;
  margin-left: 30px;
  display: inline-block;
}
.lq {
  // display: inline-block;
  background-color: pink;
  width: 200px;
  height: 80px;
  margin-left: 110px;
  margin-top: -25px;
}
.wl {
  // display: inline-block;
  background-color: pink;
  width: 200px;
  height: 80px;
  margin-left: 349px;
  margin-top: -81px;
}
.el-card {
  height: 80px;
  // margin-left: 40px;
  // display: block;
}
.member {
  margin-left: 107px;
  margin-top: -22px;
}
.qy{
  margin-right: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.el-col{
  margin-top: 20px;
}
.el-button--warning{
  margin-right: 12px;
}
</style>